<!--
 * @Description: 退款弹窗
 * @Author: py
 * @Date: 2024-08-08
-->
<script setup lang='ts' name="refund-dialog">
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { refundApi } from '@fl/api/city-service'
import { SubmitBtn } from '@fl/components'

const props = withDefaults(defineProps<{
    data?: any
}>(), {
    data: {},
})

const emits = defineEmits(['success'])

const formRef = ref()
const visible = defineModel<boolean>('visible', { required: true })
const { data } = toRefs(props)

const initialState = {
    afterSaleAmount: 0,
}
const formValues = ref<FieldValues>({
    ...data.value,
    ...initialState,
})
// const formValues = ref<FieldValues>({})

// watchEffect(() => {
//     if (data.value) {
//         formValues.value = {
//             ...data.value,
//             afterSaleAmount: '',
//         }
//     }
// })

const columns: PlusColumn[] = [
    {
        label: '退款编号',
        prop: 'returnCode',
        valueType: 'text',
    },
    {
        label: '售后编号',
        prop: 'afterSaleCode',
        valueType: 'text',
    },
    {
        label: '订单编号',
        prop: 'orderCode',
        valueType: 'text',
    },
    {
        label: '商品名称',
        prop: 'skuName',
        valueType: 'text',
    },
    {
        label: '用户名称',
        prop: 'userName',
        valueType: 'text',
    },
    {
        label: '商品金额',
        prop: 'orderAmount',
        renderField: (value: any) => `￥${value}`,
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { controls: false, min: 0, precision: 2 },
        label: '退款金额',
        prop: 'afterSaleAmount',
        valueType: 'input-number',
    },
]

const rules = {
    afterSaleAmount: [{ message: '请输入退款金额', required: true, trigger: 'blur' }],
}

async function handleAllConfirm(handleValidate: () => Promise<boolean>) {
    const isPass = await handleValidate()
    if (isPass) {
        // formRef.value.handleConfirm()

        const {
            afterSaleAmount,
        } = formValues.value
        const {
            afterSaleCode,
            afterSaleId,
            memberId,
            orderAmount,
            orderCode,
            orderId,
            orderLineId,
            returnCode,
            skuName,
            userName,
        } = data.value
        const oParams = {
            afterSaleAmount,
            afterSaleCode,
            afterSaleId,
            memberId,
            orderAmount,
            orderCode,
            orderId,
            orderLineId,
            returnCode,
            skuName,
            userName,
        }
        // console.log(oParams)

        refundApi(oParams).then(() => {
            visible.value = false
            ElMessage.success('退款成功')
            emits('success')
        })
    }
}

// function onConfirm(values: FieldValues) {
//     console.log('🚀 ~ confirm ~ confirm:', values)
//     visible.value = false
//     emits('success')
// }
</script>

<template>
    <PlusDialogForm ref="formRef"
                    v-model:visible="visible"
                    v-model="formValues"
                    :dialog="{
                        width: '500',
                        title: '确认退款信息',
                        hasFooter: false,
                    }"
                    :form="{
                        labelWidth: 100,
                        hasFooter: true,
                        footerAlign: 'center',
                        columns,
                        rules,
                        hasErrorTip: false,
                    }"
    >
        <!-- @confirm="onConfirm" -->
        <template #form-footer="{ handleSubmit }">
            <SubmitBtn type="primary"
                       class="mt5"
                       @click="handleAllConfirm(handleSubmit)"
            >
                确认退款
            </SubmitBtn>
        </template>
    </PlusDialogForm>
</template>
